<template>
  <view class="u-rela edu-course__image" :style="[wrapStyle]" @click="onClick">
    <edu-image :width="width" :height="height" :src="image"></edu-image>

    <!-- 类型图标 -->
    <slot v-if="$slots.tag" name="tag" />
    <template v-else>
      <view
        v-if="$edu.test.inArray(courseType, [1, 2, 3, 4])"
        class="edu-course__image-tag u-abso"
        :class="[courseIconPos]"
        :style="[courseIconStyle]"
      >
        <image class="img" :src="courseIcon[courseType]"></image>
      </view>
    </template>

    <!-- 活动图标 -->
    <slot v-if="$slots.promotion" name="promotion" />
    <template v-else>
      <view
        v-if="$edu.test.inArray(promotionType, [1, 2, 3, 4])"
        class="edu-course__image-activity u-abso"
        :class="[promotionClass[promotionType], promotionIconPos]"
        :style="[promotionIconStyle]"
      >
        <image class="img" :src="promotionIcon[promotionType]"></image>
      </view>
    </template>

    <slot />
  </view>
</template>

<script>
export default {
  props: {
    image: {
      type: String,
      default: '',
    },
    // 宽
    width: {
      type: [String, Number],
      default: '307',
    },
    // 高
    height: {
      type: [String, Number],
      default: '172',
    },
    // 圆角，单位任意
    borderRadius: {
      type: [String, Number],
      default: '4',
    },
    // 课程类型
    courseType: {
      type: [String, Number],
      default: 0,
    },
    // 课程图标位置topLeft|topRight|bottomLeft|bottomRight
    courseIconPos: {
      type: String,
      default: 'topLeft',
    },
    // 课程图标圆角 字符串形式，如"4rpx"、"4rpx 4rpx"
    courseIconRadius: {
      type: String,
      default: '4rpx',
    },
    // 活动类型
    promotionType: {
      type: [String, Number],
      default: 0,
    },
    // 活动图标位置topLeft|topRight|bottomLeft|bottomRight
    promotionIconPos: {
      type: String,
      default: 'bottomRight',
    },
    // 活动图标圆角 字符串形式，如"4rpx"、"4rpx 4rpx"
    promotionIconRadius: {
      type: String,
      default: '4rpx',
    },
  },
  data() {
    return {
      promotionClass: {
        1: 'discount',
      },
      courseIcon: {
        1: require('@/static/images/dianbocourse_icon.png'),
        2: require('@/static/images/livecourse_icon.png'),
        3: require('@/static/images/facecourse_icon.png'),
        4: require('@/static/images/classcourse_icon.png'),
      },
      promotionIcon: {
        1: require('@/static/images/discount_icon.png'),
        2: require('@/static/images/seckill_icon.png'),
        3: require('@/static/images/kanjia_icon.png'),
        4: require('@/static/images/pintuan_icon.png'),
      },
    }
  },
  computed: {
    wrapStyle() {
      let style = {}
      // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
      style.width = this.$u.addUnit(this.width)
      style.height = this.$u.addUnit(this.height)
      style.borderRadius = this.$u.addUnit(this.borderRadius)
      // 如果设置圆角，必须要有hidden，否则可能圆角无效
      style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible'
      return style
    },
    courseIconStyle() {
      let style = {}
      style.borderRadius = this.courseIconRadius
      return style
    },
    promotionIconStyle() {
      let style = {}
      style.borderRadius = this.promotionIconRadius
      return style
    },
  },
  methods: {
    // 点击图片
    onClick() {
      this.$emit('click')
    },
  },
}
</script>

<style lang="scss" scoped>
.edu-course__image {
  position: relative;
  height: 0;
  background-color: #f1f1f1;
  .u-image {
    position: absolute;
    left: 0;
    top: 0;
  }
  &-tag {
    overflow: hidden;
    &.topLeft {
      left: 0;
      top: 0;
    }
    &.topRight {
      top: 0;
      right: 0;
    }
    &.bottomLeft {
      left: 0;
      bottom: 0;
    }
    &.bottomRight {
      right: 0;
      bottom: 0;
    }
    .img {
      width: 56rpx;
      height: 32rpx;
      display: block;
    }
  }
  &-activity {
    overflow: hidden;
    .img {
      width: 64rpx;
      height: 34rpx;
      display: block;
    }
    &.topLeft {
      left: 0;
      top: 0;
    }
    &.topRight {
      top: 0;
      right: 0;
    }
    &.bottomLeft {
      left: 0;
      bottom: 0;
    }
    &.bottomRight {
      right: 0;
      bottom: 0;
    }
    &.discount {
      .img {
        width: 104rpx;
      }
    }
  }
}
</style>
